
<template>
    <div>
        <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="6">
                <el-upload
                    limit="1"
                    :name="uploadName"
                    :action="uploadAction"
                    list-type="picture-card"
                    :show-file-list="true"
                    :before-upload="beforeAvatarUpload"
                    :on-success="(res)=>{afterUploadSuccess(res,1)}">
                    <i slot="default" class="el-icon-plus">轮播图1</i>
                </el-upload>
            </el-col>
            <el-col :span="6">
                <el-upload
                    limit="1"
                    :name="uploadName"
                    :action="uploadAction"
                    list-type="picture-card"
                    :show-file-list="true"
                    :before-upload="beforeAvatarUpload"
                    :on-success="(res)=>{afterUploadSuccess(res,2)}">
                    <i slot="default" class="el-icon-plus">轮播图2</i>
                </el-upload>
            </el-col>
            <el-col :span="6">
                <el-upload
                    limit="1"
                    :name="uploadName"
                    :action="uploadAction"
                    list-type="picture-card"
                    :show-file-list="true"
                    :before-upload="beforeAvatarUpload"
                    :on-success="(res)=>{afterUploadSuccess(res,3)}">
                    <i slot="default" class="el-icon-plus">轮播图3</i>
                </el-upload>
            </el-col>
        </el-row>
        <h1 class="el-icon-picture">轮播图预览</h1>
        <template>
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="(item,index) in slideShow" :key="item">
                    <img width="100%" :src="item">
                    <h3>轮播图{{index}}</h3>
                </el-carousel-item>
            </el-carousel>
        </template>
        <h1 class="el-icon-picture">激活教程图预览</h1>
        <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="6">
                <el-upload
                    :name="uploadName"
                    :action="uploadAction"
                    list-type="picture-card"
                    limit="1"
                    :before-upload="beforeAvatarUpload"
                    :on-success="(res)=>{afterUploadSuccess(res,4)}">
                    <i slot="default" class="el-icon-plus">激活教程图</i>
                </el-upload>
            </el-col>
        </el-row>
        <el-button type="success" icon="el-icon-edit-outline" round :loading="loading" @click="saveUpdate">保存修改</el-button>
        <div class="demo-image__lazy">
            <el-image :src="others.teachPhoto" lazy></el-image>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
    export default {
        data(){
            return{
                dialogVisible:true,
                slideShow:[],
                others:{
                    showPhoto1:'',
                    showPhoto2:'',
                    showPhoto3:'',
                    teachPhoto:'',
                    categoryId:'',
                    discount:''
                },
                loading:false,
                uploadAction:"http://localhost/graduateprogram/others/uploadSlideshow",
                uploadName:'slideshow',
            }
        },
        mounted(){
            axios.get('/others/getSlideShow').then(
                response=>{
                    //先改修改模板值
                    this.others=response.data.data;
                    //再该展示值
                    this.slideShow.push(this.others.showPhoto1);
                    this.slideShow.push(this.others.showPhoto2);
                    this.slideShow.push(this.others.showPhoto3);
                }
            )
        },
        methods:{
            saveUpdate(){
                axios(
                    {
                        method:'post',
                        url:'/others/updateOthers',
                        data:this.others
                    }
                ).then(
                    response=>{
                        if(response.data.data==0){
                            alert('修改失败');
                        }else{
                            alert('修改成功');
                        }
                    }
                )
            },
            beforeAvatarUpload(){
                this.loading=true;
            },
            afterUploadSuccess(res,val){
                const photoUrl=res.data;
                var slideShowTool=[];
                if(val===1){//轮播图1
                    this.others.showPhoto1=photoUrl;
                }else if(val===2){//轮播图2
                    this.others.showPhoto2=photoUrl;
                }else if(val===3){//轮播图3
                    this.others.showPhoto3=photoUrl;
                }else if(val===4){//激活教程图
                    this.others.teachPhoto=photoUrl; 
                }
                slideShowTool.push(this.others.showPhoto1);
                slideShowTool.push(this.others.showPhoto2);
                slideShowTool.push(this.others.showPhoto3);
                this.slideShow=slideShowTool;
                this.loading=false;
            }
        }
    }
</script>
<style scoped>
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  /*下面是布局的样式*/
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>